<!--
 * @Author: your name
 * @Date: 2021-10-18 10:15:13
 * @LastEditTime: 2021-10-19 10:47:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_test\08_浏览器本地存储\sessionStorage.html
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>sessionStorage</title>
  </head>
  <body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空一个数据</button>

    <script type="text/javascript">
      let p = { name: "张三", age: 18 };

      function saveData() {
        sessionStorage.setItem("msg", "hello!");
        sessionStorage.setItem("msg2", "666");
        sessionStorage.setItem("person", JSON.stringify(p));
      }

      function readData() {
        console.log(sessionStorage.getItem("msg"));
        console.log(sessionStorage.getItem("msg2"));

        const result = sessionStorage.getItem("person")
        console.log(JSON.parse(result));

        //console.log(sessionStorage.getItem("msg3"));
      }

      function deleteData() {
          sessionStorage.removeItem('msg')
      }

      function deleteAllData() {
          sessionStorage.clear()
      }
    </script>
  </body>
</html>
